<template>
  <div class="loan-nsm">
    <div class="rowone">
      <el-row type="flex" class="row-bg" :gutter="24">
        <el-col :span="5">
          <el-input
            placeholder="搜索借款方"
            suffix-icon="el-icon-search"
            v-model="requirement.userName"
            class="inputLeft"
          >
          </el-input>
        </el-col>
        <el-col :span="5">
          <el-input
            placeholder="搜索借款人手机号"
            suffix-icon="el-icon-search"
            v-model="requirement.userPhone"
            class="inputLeft"
          >
          </el-input>
        </el-col>
        <el-col :span="5">
          <el-select
                v-model="requirement.status"
                clearable
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value"
                >
                </el-option>
              </el-select>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" icon="el-icon-search" @click="onClickSearch">搜索</el-button>
        </el-col>
      </el-row>
    </div>
    <TableComponent
      :cols="cols"
      :table-data="tableData"
      :total="total"
      @requestData="requestData"
      :showOperating="false"
    >
    </TableComponent>
  </div>
</template>

<script>
import TableComponent from "../../components/basic/TableComponent";

import {getAllLoanFrom} from "../../http/loan";

export default {
  name: "LoanNSM",
  components: {
    TableComponent,
  },
  data() {
    return {
      cols: {
        id: "借款ID",
        userName: "借款方",
        userPhone: "借款人手机",
        name: "借款名称",
        total: "借款金额",
        apr: "年化利率(%)",
        repayment: "还款方式",
        loanPeriod: "期限(天)",
        loanMgrInterestRate: "借款管理月费率(%)",
        loanManagementFee:"借款管理费",
        gmtCreated: "上架时间",
        saleTime: {
          addr: ["borrowSubjectInfo"],
          title: "开售时间",
        },
      },
      requirement:{
        name:"",//新标名称
        userName:"",//借款方名称
        userPhone:"",//借款方手机
        status:"全部状态",//新标状态
        loanType:"",//借款类型
      },
      tableData: [],
      total: 0,
      page:1,
      limit:5,
      options: [
        {
          value: "全部状态",
        },
        {
          value: "新标待审核",
        },
        {
          value: "初审不通过",
        },
        {
          value: "新标待上架",
        },
        {
          value: "满标待审",
        },
        {
          value: "还款中",
        },
        {
          value: "已完成",
        },
        {
          value: "流标",
        },
        {
          value: "撤标",
        }
      ],
    };
  },
  methods: {
    requestData(page, limit,requirement) {
      this.page = page;
      this.limit = limit;
      getAllLoanFrom(page,limit,requirement).then(res => {
        if(res.data.code == 20000) {
          this.total = res.data.data.total;
          this.tableData = res.data.data.rows;
        } else {
          this.$message.error(res.data.message);
        }
      }).catch(err => {
        console.err(err)
        this.$message.error("数据加载失败！详情见日志");
      });
    },
    onClickSearch(){
      this.requestData(1,5,this.requirement)
    }
  },
  beforeMount() {
    this.requestData(1, 5);
  }
};
</script>

<style scoped>
.more {
  border: 1px solid #ebeef5;
  border-radius: 3px;
  padding: 0 10px;
}
.row-bg {
  padding: 20px 24px;
}

</style>